<template>
    <div>
        <div>
        <p><input type="name" v-model="name"></p>
        <p><input type="file" @change="getfile($event)"></p>
        <p><input type="button" @click="tianjia()" value="提交"></p>
        </div>
        <div>
            <table>
                <tr>
                    <td>姓名</td>
                    <td>图片</td>
                </tr>
                <tr v-for="(i,j) in tulist" :key="j">
                    <td>{{i.name}}</td>
                    <td>{{i.img}}</td>
                </tr>
            </table>
        </div>
    </div>

</template>

<script>
import axios from 'axios'
import {RI_tupian_show} from '../axios_send/api.js';
export default {
    name:"tupian",
    data(){
        return{
            name:name,
            tulist:"",
        }
    },
    methods:{
        tianjia(){
            var data = new FormData()
            data.append("name",this.name)
            data.append("img",this.file)
            axios({
                url:"http://127.0.0.1:8000/zks/tupians/",
                method:"post",
                data:data
            }).then(res=>{
                console.log(res)
                this.tushow()
            })
        },
        getfile(event){
            this.file = event.target.files[0]
            console.log(this.file);  
        },
        tushow(){
            RI_tupian_show()
            .then(res=>{
                console.log(res)
                this.tulist=res.data
            })
        }
    },
    created(){
        this.tushow()
    }
}
</script>

<style>

</style>
